<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/购物车.css"/>
	</head>
	<body>
		<header>
			<div class="top">
				<div class="topl">
					<div>
						<img src="img/icon_1.png"/>
					</div>
				</div>
				<div class="topr">
					<div><img src="img/sousuo.png"/></div>
					<div class="c1">
						<img src="img/gouwuche.png"/>
						<div class="circle"><p id="num">5</p></div>
					</div>
					<div><img src="img/caidan.png"/></div>
				</div>
				<div class="bottom">
					<div class="bl">
						<p>购物车</p>
					</div>
					<div class="br">
						<p>编辑</p>
					</div>
				</div>
			</div>
		</header>
		<section>
			<div class="s_max">
				<!--1-->
				<div class="s_middle">
					<div class="s_min">
						<div class="s_min_left">
							<div class="circle1 active">
								
							</div>
						</div>
						<div class="s_min_right">
							<div class="s_top">
								<div class="s_top_left">
									<img src="img/gwc_1.png"/>
								</div>
								<div class="s_top_right">
									<p><span class="s1">荣耀 50 SE 5G全网通 8GB+128GB (亮黑色)</span></p>
									<p><span class="s2"> 亮黑色,5G全网通 8GB+128GB,官方标配</span></p>
									<div class="d1">
										<div>
											<p>分期免期</p>
										</div>
									</div>
									<div class="d2">
										<p class="p3"><b class="b active">￥1399</b></p>
										<div class="d2_1">
											<b></b>
											<div><p class="number active">1</p></div>
											<b></b>
										</div>
									</div>
									<div class="d3">
										<p>限购2件</p>
									</div>
								</div>
							</div>
							<div class="s_bottom">
								<p>服务</p>
								<div class="d4">
									<div>选购</div>
									<div class="d5">
										<span>碎屏服务</span>
										<span>延长服务</span>
									</div>
								</div>
								<i class="i_1"></i>
							</div>
						</div>
					</div>
				</div>
				<!--2-->
				<div class="s_middle">
					<div class="s_min">
						<div class="s_min_left">
							<div class="circle1 active" >
								
							</div>
						</div>
						<div class="s_min_right">
							<div class="s_top">
								<div class="s_top_left">
									<img src="img/gwc_1.png"/>
								</div>
								<div class="s_top_right">
									<p><span class="s1">荣耀 50 SE 5G全网通 8GB+128GB (亮黑色)</span></p>
									<p><span class="s2"> 亮黑色,5G全网通 8GB+128GB,官方标配</span></p>
									<div class="d1">
										<div>
											<p>分期免期</p>
										</div>
									</div>
									<div class="d2">
										<p class="p3"><b class="b active">￥2399</b></p>
										<div class="d2_1">
											<b></b>
											<div><p class="number active">1</p></div>
											<b></b>
										</div>
									</div>
									<div class="d3">
										<p>限购4件</p>
									</div>
								</div>
							</div>
							<div class="s_bottom">
								<p>服务</p>
								<div class="d4">
									<div>选购</div>
									<div class="d5">
										<span>碎屏服务</span>
										<span>延长服务</span>
									</div>
								</div>
								<i class="i_1"></i>
							</div>
						</div>
					</div>
				</div>
				<!--3-->
				<div class="s_middle">
					<div class="s_min">
						<div class="s_min_left">
							<div class="circle1 active">
								
							</div>
						</div>
						<div class="s_min_right">
							<div class="s_top">
								<div class="s_top_left">
									<img src="img/gwc_1.png"/>
								</div>
								<div class="s_top_right">
									<p><span class="s1">荣耀 50 SE 5G全网通 8GB+128GB (亮黑色)</span></p>
									<p><span class="s2"> 亮黑色,5G全网通 8GB+128GB,官方标配</span></p>
									<div class="d1">
										<div>
											<p>分期免期</p>
										</div>
									</div>
									<div class="d2">
										<p class="p3"><b class="b active">￥3399</b></p>
										<div class="d2_1">
											<b></b>
											<div><p class="number active">1</p></div>
											<b></b>
										</div>
									</div>
									<div class="d3">
										<p>限购6件</p>
									</div>
								</div>
							</div>
							<div class="s_bottom">
								<p>服务</p>
								<div class="d4">
									<div>选购</div>
									<div class="d5">
										<span>碎屏服务</span>
										<span>延长服务</span>
									</div>
								</div>
								<i class="i_1"></i>
							</div>
						</div>
					</div>
				</div>
				<!--4-->
				<div class="s_middle">
					<div class="s_min">
						<div class="s_min_left">
							<div class="circle1 active">
								
							</div>
						</div>
						<div class="s_min_right">
							<div class="s_top">
								<div class="s_top_left">
									<img src="img/gwc_1.png"/>
								</div>
								<div class="s_top_right">
									<p><span class="s1">荣耀 50 SE 5G全网通 8GB+128GB (亮黑色)</span></p>
									<p><span class="s2"> 亮黑色,5G全网通 8GB+128GB,官方标配</span></p>
									<div class="d1">
										<div>
											<p>分期免期</p>
										</div>
									</div>
									<div class="d2">
										<p class="p3"><b class="b active">￥4399</b></p>
										<div class="d2_1">
											<b></b>
											<div><p class="number active">1</p></div>
											<b></b>
										</div>
									</div>
									<div class="d3">
										<p>限购8件</p>
									</div>
								</div>
							</div>
							<div class="s_bottom">
								<p>服务</p>
								<div class="d4">
									<div>选购</div>
									<div class="d5">
										<span>碎屏服务</span>
										<span>延长服务</span>
									</div>
								</div>
								<i class="i_1"></i>
							</div>
						</div>
					</div>
				</div>
				<!--5-->
				<div class="s_middle">
					<div class="s_min">
						<div class="s_min_left">
							<div class="circle1 active">
								
							</div>
						</div>
						<div class="s_min_right">
							<div class="s_top">
								<div class="s_top_left">
									<img src="img/gwc_1.png"/>
								</div>
								<div class="s_top_right">
									<p><span class="s1">荣耀 50 SE 5G全网通 8GB+128GB (亮黑色)</span></p>
									<p><span class="s2"> 亮黑色,5G全网通 8GB+128GB,官方标配</span></p>
									<div class="d1">
										<div>
											<p>分期免期</p>
										</div>
									</div>
									<div class="d2">
										<p class="p3"><b class="b active">￥5399</b></p>
										<div class="d2_1">
											<b></b>
											<div><p class="number active">1</p></div>
											<b></b>
										</div>
									</div>
									<div class="d3">
										<p>限购10件</p>
									</div>
								</div>
							</div>
							<div class="s_bottom">
								<p>服务</p>
								<div class="d4">
									<div>选购</div>
									<div class="d5">
										<span>碎屏服务</span>
										<span>延长服务</span>
									</div>
								</div>
								<i class="i_1"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		
		<footer>
			<div class="fl">
				<div id="fm" class="act1"></div>
				<span class="f2">全选</span>
			</div>
			<div class="f3">
				<a>结算(<p id="num_1">5</p>)</a>
			</div>
			<div class="price">
				<p>总计：</p>
				<p>￥4298</p>
			</div>
		</footer>
		
		<script type="text/javascript">
			var circles=document.querySelectorAll(".circle1");
			function f1(){
				var bbs=document.querySelectorAll(".b");
				var numbers=document.querySelectorAll(".number");
				for(let i=0;i<circles.length;i++){
					circles[i].onclick=function(){
						if(this.className=="circle1 hid"){
							this.className="circle1 active";
							
						}else{
							this.className="circle1 hid";
						}
						if(this.className=="circle1 hid"){
							fm.className="hid1";
						}
						if(numbers[i].className=="number active"){
							numbers[i].className="number hid";
						}else if(numbers[i].className=="number hid"){
							numbers[i].className="number active";
						}
						f2();
						f4();
						f5();
						f6();
					}
				}
			}
			function f2(){
				var j=0;
				var num1=document.querySelectorAll(".circle1");
//				console.log(num1[0].className);
				for(var i=0;i<num1.length;i++){
					if(num1[i].className=="circle1 active"){
						j++;
					}
				}
				num_1.innerHTML=j;
			}
			function f3(){
				var bs1=document.querySelectorAll(".d2_1>b:nth-of-type(1)");
				var bs2=document.querySelectorAll(".d2_1>b:nth-of-type(2)");
				var limit=document.querySelectorAll(".d3>p");
				var numbers=document.querySelectorAll(".number");
//				console.log(numbers[i].innerHTML);
//				console.log(parseInt(limit[4].innerHTML.slice(2,)));
//				
//				console.log(limit);
//				console.log(bs1[0].nextElementSibling.innerText);
//				console.log(bs2[0].previousElementSibling.innerText);
				for(let i=0;i<bs1.length;i++){
					bs1[i].onclick=function(){
						if(numbers[i].innerHTML>1){
							numbers[i].innerHTML-=1;
						}
						f4();
						f6();
					}
					bs2[i].onclick=function(){
						if(numbers[i].innerHTML<parseInt(limit[i].innerHTML.slice(2,))){
							numbers[i].innerHTML=parseInt(numbers[i].innerHTML)+1;
						}
						f4();
						f6();
					}
				}
			}
			
			function f4(){
				var limit=document.querySelectorAll(".d3>p");
				var total=document.querySelectorAll(".price>p");
				var oprice=document.querySelectorAll(".p3>b");
				var numbers=document.querySelectorAll(".number");
				var mm=0;
				for(let i=0;i<oprice.length;i++){
					if(numbers[i].className=="number active"){
						mm+=oprice[i].innerHTML.slice(1,)*numbers[i].innerHTML;
					}
				}
				total[1].innerHTML="￥"+mm;
			}
			function f5(){
				fm.onclick=function(){
					var numbers=document.querySelectorAll(".number");
					if(this.className=="act1"){
						for(var i=0;i<circles.length;i++){
							circles[i].className="circle1 hid";
							numbers[i].className="number hid";
						}
						this.className="hid1";
					}else{
						for(var i=0;i<circles.length;i++){
							circles[i].className="circle1 active";
							numbers[i].className="number active";
						}
						this.className="act1";
					}
					f1();
					f2();
					f4();
					f6();
				}
			}
			function f6(){
				var numbers=document.querySelectorAll(".number");
				var num1=0;
				for (let i=0;i<numbers.length;i++){
					if(numbers[i].className=="number active"){
						num1+=parseInt(numbers[i].innerHTML);
					}
				}
				num.innerHTML=num1;
			}
			f1();
			f3();
			f4();
			f5();
			f6();
		</script>
	</body>
</html>
